<?php
require_once 'common.php';

// 获取产品ID
$product_id = $_GET['id'] ?? '';
if (empty($product_id)) {
    header('Location: list.php');
    exit;
}

// 调用接口获取产品详情
// 调用接口获取产品列表 ?app_id=10001
$params = [
    'product_id' => $product_id,
    'app_id' => 10001
];
$product = api_request(API_PRODUCT_DETAIL , $params );
$product_data = $product['data']['detail'] ?? [];
if (empty($product_data)) {
    echo '<h1>产品不存在或已下架</h1>';
    exit;
}

// SEO标签配置
$page_title = $product_data['product_name'] . ' - ' . format_price($product_data['product_price']) . ' - ' . SITE_NAME;
$page_desc = mb_substr(strip_tags($product_data['selling_point']), 0, 150) . '...';
$page_keywords = "{$product_data['product_name']},{$product_data['category']['name']},{$product_data['product_price']},价格";
$canonical_url = build_url('detail', ['id' => $product_id]);
?>
<?php include 'templates/header.php'; ?>
<?php include 'templates/navbar.php'; ?>

<!-- 页面标题 -->
<section class="section page-header">
  <div class="container mt30">
    <h1><?php echo $product_data['product_name']; ?></h1>
    <p class="text-muted">
      <a href="product_list.php">产品列表</a> / <?php echo $product_data['product_name']; ?>
    </p>
  </div>
</section>

<!-- 产品详情 -->
<section class="section product-detail">
  <div class="container">
    <div class="row">
      <!-- 产品图片 -->
      <div class="col-lg-6">
        <div class="product-gallery">
          <img src="<?php echo $product_data['product_image'] ?? 'https://picsum.photos/id/225/800/800'; ?>" 
               alt="辰小膳 益生元 膳食纤维 低聚果糖  肠道健康  低聚半乳糖<?php echo $product_data['product_name']; ?>" class="img-fluid main-image">
        </div>
      </div>
      
      <!-- 产品信息 -->
      <div class="col-lg-6">
        <div class="product-main-info">
          <h2 class="product-title"><?php echo $product_data['product_name']; ?></h2>
          
          <div class="product-price-large">
            <?php echo format_price($product_data['product_price'] ?? 0); ?>
          </div>
          
		  <!--
          <div class="product-description mt-4">
            <h3>产品简介</h3>
            <p><?php echo $product_data['description'] ?? '暂无详细介绍'; ?></p>
          </div>
          
          <div class="product-features mt-4">
            <h3>产品特点</h3>
            <ul class="list-unstyled">
              <?php
              if (!empty($product_data['features'])) {
                  foreach ($product_data['features'] as $feature) {
                      echo '<li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i>' . $feature . '</li>';
                  }
              } else {
                  echo '<li>暂无产品特点信息</li>';
              }
              ?>
            </ul>
          </div>
		  -->
		  
          <div class="product-features mt-4">
			<img src=".\static\image\buy.png" style="width:100%">
          </div>
          
          <div class="product-actions mt-5">
            <a href="#contact" class="btn btn-primary btn-lg">微信扫码领8折新人优惠券</a>
            <a href="product_list.php" class="btn btn-secondary btn-lg ms-3">返回列表</a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 产品详情内容 -->
    <div class="row mt-10 mt30">
      <div class="col-12">
        <div class="product-details-content">
          <ul class="nav nav-tabs" id="productTabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" 
                      type="button" role="tab" aria-controls="details" aria-selected="true">详细说明</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" 
                      type="button" role="tab" aria-controls="specs" aria-selected="false">规格参数</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="usage-tab" data-bs-toggle="tab" data-bs-target="#usage" 
                      type="button" role="tab" aria-controls="usage" aria-selected="false">使用方法</button>
            </li>
          </ul>
          
          <div class="tab-content" id="productTabsContent">
            <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
              <div class="" style="width:900px">
                <?php echo $product_data['content'] ?? '<p>暂无详细说明</p>'; ?>
              </div>
            </div>
            
            <div class="tab-pane fade" id="specs" role="tabpanel" aria-labelledby="specs-tab">
              <div class="">
                <table class="table table-striped">
                  <tbody>
                    <tr>
                      <th width="30%">产品规格</th>
                      <td><?php echo $product_data['spec'] ?? '暂无信息'; ?></td>
                    </tr>
                    <tr>
                      <th>主要成分</th>
                      <td><?php echo $product_data['ingredients'] ?? '暂无信息'; ?></td>
                    </tr>
                    <tr>
                      <th>保质期</th>
                      <td><?php echo $product_data['shelf_life'] ?? '暂无信息'; ?></td>
                    </tr>
                    <tr>
                      <th>储存方式</th>
                      <td><?php echo $product_data['storage'] ?? '暂无信息'; ?></td>
                    </tr>
                    <tr>
                      <th>生产厂家</th>
                      <td><?php echo $product_data['manufacturer'] ?? '暂无信息'; ?></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            
            <div class="tab-pane fade" id="usage" role="tabpanel" aria-labelledby="usage-tab">
              <div class="">
                <?php echo $product_data['usage'] ?? '<p>暂无使用方法说明</p>'; ?>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 相关产品推荐 -->
<section class="section related-products">
  <div class="container">
    <div class="section-title">
      <h2>相关推荐</h2>
      <p>您可能还对这些产品感兴趣</p>
    </div>
    
    <div class="row">
      <?php
      // 获取相关产品（这里简化处理，实际应根据分类获取相关产品）
      $related_products = api_request(API_PRODUCT_LIST, [
          'app_id' => 10001,
          'page' => 1,
          'list_rows' => 3,
          'category_id' => $product_data['category_id'] ?? 0
      ]);
      
      if (!empty($related_products['data']['list'])) {
          foreach ($related_products['data']['list']['data'] as $related) {
              if ($related['product_id'] == $product_id) continue; // 跳过当前产品
      ?>
      <div class="col-lg-4 col-md-6 mb-4">
        <div class="product-card">
          <div class="product-img">
            <img src="<?php echo $related['product_image'] ?? 'https://picsum.photos/id/' . rand(200, 300) . '/600/400'; ?>" 
                 alt="辰小膳 益生元 膳食纤维 低聚果糖  肠道健康  低聚半乳糖<?php echo $related['product_name']; ?>" class="img-fluid">
          </div>
          <div class="product-info">
            <h3><?php echo $related['product_name']; ?></h3>
            <div class="product-price"><?php echo format_price($related['product_price'] ?? 0); ?></div>
            <a href="product_detail.php?id=<?php echo $related['product_id']; ?>" class="btn btn-primary mt-3">查看详情</a>
          </div>
        </div>
      </div>
      <?php
          }
      }
      ?>
    </div>
  </div>
</section>

<?php include 'templates/footer.php'; ?>